<template>
    <div>
        <div class="item" @click="showEditInput" v-show="!isEdit">
            {{text}}
        </div>
        <input ref="inputRef" class="item edit" v-model="editMsg" v-show="isEdit" @blur="textChange"> 
    </div>
</template>

<script>
    export default{
        props:{
            text:{
                type:String,
                default:""
            },
            index:{
                type:Number
            }
        },
        data(){
            return{
                editMsg:this.text,
                isEdit:false
            }
        },
        methods:{
            showEditInput(){
                this.isEdit=true;
                this.$nextTick(()=>{
                    this.$refs.inputRef.focus()
                })
            },
            textChange(a,b){
                this.isEdit=false;
                this.$emit('change',this.editMsg,this.index)
            }
        }
    }
</script>

<style scoped>
.item{
    width: 200px;
    height: 40px;
    line-height: 40px;
    background: #40b883;
    color: white;
    border-bottom: 1px solid #ccc;
    margin: 0 auto;
}
.edit{
    background: white;
    color: black;
}
</style>
